<template>
	<view class="content" :style="{ 'background-image': isTitle?`url(${bg})`:`none` }">
		<loginVue :Visible="Visible" @isModal="isModal" />
		<u-toast ref="uToast" />
		<!-- 头部 -->
		<view class="title" :class="isTitle ? 'up' : 'down'">
			<view class="title-img">
				<image :src="titlebg" mode=""></image>
			</view>
			<view class="search" :class="isTitle ? 'search-bg' : 'search-bgc'" @tap="jumpSearch">
				<image src="../../static/home/seach.png" mode=""></image>
				<input v-model="from.keyword" disabled="false" type="text" class="search-input"
					placeholder="根据科室、姓名找医生" />
				<view class="vertical">
				</view>
				<view class="search-btn" :class="isTitle ? 'search-bgc' : 'search-bg'">
					搜索
				</view>
			</view>
		</view>
		<view class="bgtitle" :class="isTitle ? 'bgtitle-up' : 'bgtitle-down'">
			<view class="title-text">
				成都西南中医医院
			</view>
			<view class="search" :class="isTitle ? 'search-bg' : 'search-bgc'" @tap="jumpSearch">
				<image src="../../static/home/seach.png" mode=""></image>
				<input v-model="from.keyword" disabled="false" type="text" class="search-input"
					placeholder="根据科室、姓名找医生" />
				<view class="vertical">
				</view>
				<view class="search-btn" :class="isTitle ? 'search-bgc' : 'search-bg'">
					搜索
				</view>
			</view>
		</view>
		<!-- <button open-type="share">分享</button> -->
		<scroll-view show-scrollbar="true" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scroll="scroll"
			@scrolltolower="lower">


			<view class="scroll-box">
				<!-- 轮播图 -->
				<view class="swiper-box">
					<u-swiper @click="advertisement" :list="list" mode="round" indicator-pos=""
						border-radius='16'></u-swiper>
				</view>
				<view class="register">
					<view class="item-box">
						<view class="item" v-for="(item,index) in registerList" :key="index" @click="skip(item)">
							<image :src="item.image" mode=""></image>
							<view class="">
								{{item.title}}
							</view>
							<text>{{item.text}}</text>
						</view>
					</view>
					<view class="register-img" @click="skipOffice">
						<image :src="registerbg" mode=""></image>
					</view>
				</view>

				<view class="register">
					<view class="register-title">
						门诊服务
					</view>
					<view class="outpatient-box">
						<u-grid :col="4">
							<u-grid-item v-for="(item, index) in outpatient" @click="clickgo(item)"
								:index="item.package" :key="index">
								<!-- <u-icon :name="item" :size="46"></u-icon> -->
								<image :src="item.image" mode=""></image>
								<text class="grid-text">{{ item.title }}</text>
							</u-grid-item>
						</u-grid>
					</view>

				</view>
				<view class="register">
					<view class="register-title">
						住院服务
					</view>
					<view class="outpatient-box">
						<view class="grid-box">
							<view v-for="(item, index) in hospitalized" @click="clickgo(item)" :index="item.package"
								:key="index" class="grid-item">
								<!-- <u-icon :name="item" :size="46"></u-icon> -->
								<image :src="item.image" mode=""></image>
								<text class="grid-text">{{ item.title }}</text>
							</view>
						</view>
					</view>

				</view>
				<view class="register lastregister">
					<view class="register-title">
						便民服务
					</view>
					<view class="outpatient-box">
						<u-grid :col="4">
							<u-grid-item v-for="(item, index) in people" :index="item.package" :key="index"
								@click="clickgo(item)">
								<!-- <u-icon :name="item" :size="46"></u-icon> -->
								<image :src="item.image" mode=""></image>
								<text class="grid-text">{{ item.title }}</text>
							</u-grid-item>
						</u-grid>
					</view>

				</view>
			</view>


		</scroll-view>
	</view>
</template>

<script>
	import config from "../../utils/config";
	import CreatePosterVue from "../../components/CreatePoster.vue";
	import loginVue from "../../components/login.vue";
	import {
		listByIds,
		getPhone
	} from '../../service/api.js'
	import {
		getStore
	} from "../../utils";
	export default {
		onShareAppMessage(res) {
			return {

				title: '', // 分享的标题
				path: '/pages/message/index', // 分享的页面路径
				imageUrl: '' // 分享的图片路径
			};
		},
		computed: {
			isToken() {
				return this.$store.state.isToken // 访问 Vuex 中的 state
			},
		},
		components: {
			CreatePosterVue,
			loginVue
		},
		data() {
			return {
				Visible: false,
				isTitle: true,
				//背景大图
				bg: config.ossHost + '2024/12/29/526cd878dbcb473792128d350b195a58.png',
				//
				titlebg: config.ossHost + '2024/12/29/4f2da7f431a34d01a26c1f3c07ab0861.png',
				registerbg: config.ossHost + '2024/12/29/c9a0ef938b8b45a3bf5e175aabf0de14.png',

				list: [{
						image: config.ossHost + '2024/12/29/383e81ae8a83484a9882a3145e61d89f.png',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东',
						package: 'hospitalSummary'

					},
					{
						image: config.ossHost + '2024/12/29/383e81ae8a83484a9882a3145e61d89f.png',
						title: '身无彩凤双飞翼，心有灵犀一点通',
						package: 'hospitalSummary'
					},
					{
						image: config.ossHost + '2024/12/29/383e81ae8a83484a9882a3145e61d89f.png',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
						package: 'hospitalSummary'
					}
				],
				registerList: [{
						image: require("../../static/home/three.png"),
						title: '预约挂号',
						text: '线下门诊预约',
						package: 'healthyHome'

					},
					{
						image: require("../../static/home/one.png"),
						title: '网上问诊',
						text: '5分钟必响应',
						package: ''
					},
					{
						image: require("../../static/home/two.png"),
						title: '互联网医院',
						text: '查疾病选医生',
						package: 'specialNeed'
					}
				],
				outpatient: [{
						image: config.ossHost + '2024/12/29/2af5f01edc7943749a11d2c074181080.png',
						title: '挂号须知',
						package: ''
					},
					{
						image: config.ossHost + '2024/12/29/a3e917fc7f35460bafee3b602b9284df.png',
						title: '报告查询',
						package: ''
					},
					{
						image: config.ossHost + '2024/12/29/0fcc234ba31245189a1885f20dbfce33.png',
						title: '中医体质辨识',
						package: 'answerOne'
					},
					{
						image: config.ossHost + '2024/12/29/7ea5918447ad429388ecf2bb9e25fec5.png',
						title: '院内通知',
						package: ''
					},
					{
						image: config.ossHost + '2024/12/29/e78f6bc35ae7428c9b78d76593b408d2.png',
						title: '检查须知',
						package: 'instructions'
					},
					{
						image: config.ossHost + '2024/12/29/459cc1fdba9140c188275e7702365ac9.png',
						title: '早癌筛查',
						package: ''
					},
					{
						image: config.ossHost + '2024/12/29/62ef18257214401dbd210d3298e35d68.png',
						title: '中医健康产品',
						package: 'product'
					},
					{
						image: config.ossHost + '2024/12/29/f9b3967c37cb4a41b319ad03769e513c.png',
						title: '投诉建议',
						package: 'complaint'
					}
				],
				hospitalized: [{
						image: config.ossHost + '2024/12/29/da9e46e7f3ba49b8bab43c2605d9a17a.png',
						title: '住院须知',
						package: ''
					},

					{
						image: config.ossHost + '2024/12/29/a3e917fc7f35460bafee3b602b9284df.png',
						title: '日清单查询',
						package: ''
					},
					{
						image: config.ossHost + '2024/12/29/46768675205a4b5dbac1d737986cecda.png',
						title: '出院带药查询',
						package: ''
					},
					{
						image: config.ossHost + '2024/12/29/1c61fa3bd5434cbcb1235f99c7728880.png',
						title: '押金补缴',
						package: ''
					},
				],
				people: [{
						image: config.ossHost + '2024/12/29/da9e46e7f3ba49b8bab43c2605d9a17a.png',
						title: '医院概况',
						package: 'hospitalSummary'
					},
					{
						image: config.ossHost + '2024/12/29/073e7da81bf949d9921727f473a6ac9b.png',
						title: '来院路线',
						package: 'routeToHospital'
					},
					{
						image: config.ossHost + '2024/12/29/696ed46ce409470f83353a37f552ca21.png',
						title: '院内导航',
						package: 'navigation'
					},
					{
						image: config.ossHost + '2024/12/29/53a0258156cc4916bd06265e32a7b3ea.png',
						title: '健康科普',
						package: 'allscience'
					}
				]
			}
		},
		onLoad() {
			// this.getImg()
		},
		onShow() {

			this.token = getStore("token") || null;
			if (!this.token) {
				this.Visible = true;
				return
			}
		},
		methods: {
			isModal(item) {
				this.Visible = item;
			},
			advertisement(index) {

				this.skipPage(this.list[index].package)

			},

			//门诊服务点击事件
			clickgo(item) {

				if (item.package) {
					switch (item.package) {
						case "healthyHome":
							uni.navigateTo({
								url: `/integration/bookdePartment/index`
							})

							break;
						case 'complaint':
							uni.navigateTo({
								url: `/My/Complaint/index`
							})
						default:
							this.skipPage(item.package)
							break;
					}
				} else {
					this.$refs.uToast.show({
						title: '暂未开放',
						type: 'warning',

					})
				}
			},
			//门诊服务跳转页面
			skipPage(url) {

				if (!this.token && url == 'answerOne') {
					this.Visible = true;
					return
				}
				uni.navigateTo({
					url: `/outpatient/${url}/index`
				})
			},
			//
			skip(item) {
			    if (item.package) {
			        switch (item.package) {
			            case "healthyHome":
			                uni.navigateTo({
			                    url: `/integration/bookdePartment/index`
			                });
			                break;
			            case 'specialNeed':
			                // 跳转到其他小程序的代码
			                uni.navigateToMiniProgram({
			                    appId: 'wxbc4f316a8623e1b9', // 替换为你要跳转的小程序的 App ID
			                    path: 'pages/index/index', // 替换为目标小程序的页面路径
			                    extraData: {
			                        // 额外数据可以在这里传递
			                    },
			                    envVersion: 'release', // 可选，默认为正式版
			                    success(res) {
			                        // 打开成功的回调
			                    },
			                    fail(err) {
			                        // 打开失败的回调
			                        console.error(err);
			                    }
			                });
			                break;
			            default:
			                break;
			        }
			    } else {
			        this.$refs.uToast.show({
			            title: '暂未开放',
			            type: 'warning',
			        });
			    }
			},
			//特色科室
			skipOffice() {
				uni.navigateTo({
					url: '/integration/department/index'
				})
			},
			scroll(event) {

				// 获取当前设备的信息
				const systemInfo = uni.getSystemInfoSync();
				const screenWidth = systemInfo.windowWidth; // 获取屏幕宽度
				// 获取 scrollTop 的值
				const scrollTopPx = event.detail.scrollTop;
				// 将 scrollTop 从 px 转换为 rpx
				const scrollTopRpx = scrollTopPx * (750 / screenWidth);
				if (scrollTopRpx > 250) {
					this.isTitle = false
				} else {
					this.isTitle = true
				}
			},
			lower() {

			},
			upper() {

			},
			//跳转搜索界面
			jumpSearch() {
				// uni.navigateTo({
				// 	url: '/integration/productList/index'
				// })


				uni.navigateTo({
					url: '/preLoading/search'

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		width: 100vw;
		height: 504rpx;
		background-position: top left;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		box-sizing: border-box;

		padding-top: 272rpx;
		// padding-left: 24rpx;
		// padding-right: 24rpx;
		background-color: #eff2fc;

		.up {

			transition: transform 0.5s ease, opacity 0.5s ease;
			/* 添加 opacity 的过渡 */
			// transform: translateY(0);
			/* 初始位置在正常位置 */
			opacity: 1;
			/* 完全不透明 */
		}

		.down {
			transition: transform 0.5s ease, opacity 0.5s ease;
			/* 添加 opacity 的过渡 */
			// transform: translateY(-100%);
			/* 移动到下方 */
			opacity: 0;
			/* 透明度为 0 */
		}

		.bgtitle-up {
			transition: transform 0.5s ease, opacity 0.5s ease;
			/* 添加 opacity 的过渡 */
			// transform: translateY(100%);
			/* 初始位置在正常位置 */
			opacity: 0;
			/* 完全不透明 */
		}

		.bgtitle-down {
			transition: transform 0.5s ease, opacity 0.5s ease;
			/* 添加 opacity 的过渡 */
			// transform: translateY(0);
			/* 移动到下方 */
			opacity: 1;
			/* 透明度为 0 */
		}

		.bgtitle {
			position: fixed;
			top: 0;
			background: #fff;
			// width: 100%;
			height: 225rpx;
			padding: 24rpx;
			// transition: background 0.5s ease;

			/* 初始位置 */
			.title-text {
				padding-top: 76rpx;
				margin-bottom: 45rpx;
				text-align: center;
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		//头部
		.title {
			position: fixed;
			top: 0;
			margin-left: 24rpx;
			// transition: margin-left 0.5s ease;


			/* 向上滑动 */
			.title-img {

				padding-top: 96rpx;

				image {
					width: 322rpx;
					height: 78rpx;
				}
			}


		}

		.search-bg {
			background: #FFFFFF;
		}

		.search-bgc {
			background: #F5F3F0;
		}

		.search {
			width: 654rpx;
			padding: 0 24rpx;
			height: 64rpx;

			border-radius: 8rpx 8rpx 8rpx 8rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 10rpx;
			}

			input {
				font-size: 24rpx;
				color: #B3B3B3;
				width: 525rpx;
			}

			.vertical {
				height: 25rpx;
				border-left: 1rpx solid #808080;
				margin: 0 20rpx;

			}

			.search-btn {
				font-size: 24rpx;
				color: #4D4D4D;
				width: 72rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;

				border-radius: 4rpx 4rpx 4rpx 4rpx;
			}
		}

		.scroll-Y {
			height: calc(100vh - 297rpx);

			padding-bottom: 24rpx;

			.scroll-box {
				width: 702rpx;
				padding: 0 24rpx;
			}

			.swiper-box {
				height: 260rpx;
				margin-top: 20rpx;
			}

			.register:hover {
				cursor: pointer;
			}



			.register {
				margin-top: 35rpx;
				padding: 24rpx;
				// height: 430rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 20rpx 40rpx 0rpx #F0EFE9;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.register-title {
					font-family: MiSans, MiSans;
					font-weight: bold;
					font-size: 36rpx;
				}

				.outpatient-box {
					font-size: 24rpx;
					font-weight: 500;

					image {
						width: 64rpx;
						height: 64rpx;
						margin-bottom: 10rpx;
					}

					.grid-text {
						width: 150rpx;
						/* 设置固定宽度 */
						overflow: hidden;
						/* 隐藏溢出部分 */
						white-space: nowrap;
						/* 不换行 */
						text-overflow: ellipsis;
						/* 省略号 */
						text-align: center;
					}
				}

				.register-img {
					margin-top: 24rpx;

					image {
						width: 654rpx;
						height: 160rpx;
					}
				}

				.item-box {
					display: flex;
					justify-content: space-between;
				}

				.item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					image {
						width: 112rpx;
						height: 112rpx;
						margin-bottom: 8rpx;
					}

					view {
						font-family: MiSans, MiSans;
						font-weight: bold;
						font-size: 32rpx;
						text-align: center;
						font-style: normal;
						margin-bottom: 4rpx;
					}

					text {
						font-weight: 400;
						font-size: 24rpx;
						color: #808080;

						text-align: center;
					}
				}
			}

			.lastregister {
				margin-bottom: 24rpx;
			}
		}

	}

	.grid-box {
		display: grid;
		/* 启用 grid 布局 */
		grid-template-columns: repeat(4, 1fr);
		/* 每行 4 个 item，平分宽度 */
		gap: 20rpx;

		/* 各项之间的间隙 */
		.grid-item {
			margin-top: 20rpx;
			text-align: center;
			/* 文本居中 */
		}
	}
</style>